<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :banner="banner"/>
    <home-recommend :recommend="recommend"/>
    <feature-view/>
    <tab-control class="tab-control" :title="['流行', '新款', '精选']" @changeTab="changeTab"/>
    <goods :goods="showGoods"/>
  </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl.vue'
import Goods from 'components/content/goods/Goods.vue'
import HomeSwiper from './childComps/HomeSwiper.vue'
import HomeRecommend from './childComps/HomeRecommend.vue'
import FeatureView from './childComps/FeatureView.vue'
import { getHomeMultidata, getHomeGoods } from 'network/home'

export default {
  name: "home",
  components: { NavBar, HomeSwiper, HomeRecommend, FeatureView, TabControl, Goods },
  data () {
    return {
      currentType: 'pop',
      banner: [],
      recommend: [],
      goods: {
        pop: {page: 0, list: []},
        sell: {page: 0, list: []},
        new: {page: 0, list: []},
      }
    };
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list;
    }
  },
  created() {
    this.getHomeMultidata();
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
    this.getHomeGoods("new");
  },
  methods: {
    getHomeMultidata(){
      getHomeMultidata().then(res => {
        // console.log(res)
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      })
    },
    getHomeGoods(type){
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1;
      })
    },
    changeTab(val){
      switch(val){
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';
          break;
      }
    }
  }
}
</script>
<style scoped>
  #home {
    padding-top: 44px;
  }
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .tab-control {
    position: sticky;
    top: 44px;
    z-index: 9;
  }
</style>